<!DOCTYPE html>
<html>
<!--
创建了本模板作为库房管理/库房管理/部门管理的样板
需要更改的有路径 kufang dkufang kufangmingcheng
需要更改的文本有 [库房类别 库房管理 库房名称 添加库房信息 保存并新增下一库房 新增库房类别
删除一级库房会同时一并删除其中二级库房,请谨慎操作]
需要更改的name有 projname

其中树形菜单中只设定二级,在二级下不能新建
可以鼠标右键操作树形菜单操作
当删除一级菜单会删除二级菜单并会删除对应的一级和二级下面的所有详细数据
新增数据窗口及搜索窗口都可以点到input后进行回车的方法调用

在详细列表中,通过左边树形菜单的选择,来实现一级下包括二级菜单内详细数据的展示
分别通过detail表[dkufang,dkufang,dbumen]中的w_id(绑定二级菜单id),o_id(绑定一级菜单id)
来实现.
-->


<head>
    <meta charset="UTF-8">
    <title>库房管理</title>
    <link rel="stylesheet" type="text/css" href="/static/jquery-easyui-1.3.3/themes/default/easyui.css"></link>
    <link rel="stylesheet" type="text/css" href="/static/jquery-easyui-1.3.3/themes/icon.css"></link>
    <style type="text/css">

        #menu{
            list-style: none;
            margin: 0px;
            padding: 0px;
            position: absolute;
            display: none;
            width: 100px;
            height: 100px;
            background-color: white;
        }

        #menu li{
            margin: 0px;
            padding: 0px;
        }
    </style>
    <script type="text/javascript" src="/static/jquery-easyui-1.3.3/jquery.min.js"></script>
    <script type="text/javascript" src="/static/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/static/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
    <!--<noscript><iframe src=*.html></iframe></noscript>-->
    <!--<script type="text/javascript">-->

        <!--//浏览器的默认行为：浏览器自带的功能，如：超链接，文本框可以输入内容，网页的右键菜单-->

        <!--//oncontextmenu:上下文菜单，就是右键菜单。-->

        <!--window.oncontextmenu = function(event){-->
            <!--// alert("hi");-->
            <!--var evt = event || window.event;-->
            <!--evt.preventDefault();-->
            <!--var clientWidth = document.documentElement.clientWidth || document.body.clientWidth ;-->
            <!--var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;-->

            <!--var clientHeight = document.documentElement.clientHeight || document.body.clientHeight ;-->
            <!--var scrollTop = document.documentElement.scrollTop || document.body.scrollTop ;-->

            <!--//给left和top分别赋值为鼠标的位置；-->
            <!--$("menu").style.left = evt.pageX+"px";-->
            <!--$("menu").style.top = evt.pageY+"px";-->

            <!--//如果鼠标右边放不下菜单，就把left的值的改了-->
            <!--if(evt.pageX+100>clientWidth+scrollLeft){//菜单应该在鼠标左边；-->
                <!--var left1 = evt.pageX-100;-->
                <!--$("menu").style.left = left1+"px";-->
            <!--}-->

            <!--//如果鼠标下边放不下菜单，就把top的值的改了-->
            <!--if(evt.pageY+100>clientHeight+scrollTop){-->
                <!--var top1 = (evt.pageY-100);-->
                <!--$("menu").style.top = top1+"px";-->
            <!--}-->

            <!--$("menu").style.display = "block";-->
        <!--}-->

        <!--window.onmousedown = function(){-->
            <!--$("menu").style.display = "none";-->

        <!--}-->

        <!--function $(id){-->
            <!--return document.getElementById(id);-->
        <!--}-->

    <!--</script>-->
    <script type="text/javascript">

        var url;

        //禁止整体该页面的右键弹出html相关,不阻碍easyui右键
        $(function () {
            $(document).bind('contextmenu', function (e) {
                e.preventDefault();
                $('#tree-0').menu('show', {
                    left: e.pageX,
                    top: e.pageY
                });
            });
        });

        //  库房类别模块管理
        $(document).ready(function () {
            loadTree();
            loadDataGrid();
        });
        //重新加载tree类别 设定默认add按钮可见及功能 del按钮不可用
        function reloadTree(){
            $('#tree').tree('reload');

            $('#add').linkbutton('enable');
            $('#add').attr("href", "javascript:openTypeAddDialog()");
            $('#del').linkbutton('disable');
        }
        //加载tree类别
        function loadTree(){
            $("#tree").tree({
                url: '/admin/kufang/loadKufangTree',
                onLoadSuccess: function (node, data) {
                    $("#tree").tree('expandAll');
                },
                onDblClick:function(node){

                },
                //右键选择树形菜单操作
                onContextMenu: function (e, node) { //右键时触发事件                      
                    e.preventDefault(); //阻止浏览器捕获右键事件
                    var rootNodes = $("#tree").tree('getRoots');
                    for(var i=0;i<rootNodes.length;i++){
                        var theNode = $("#tree").tree('find',rootNodes[i].id);
                        $("#tree").tree('uncheck',theNode.target);
                    }
                    $("#tree").tree('select',node.target);
                    if(node.attributes.state == 2){
                        $("#tree-2").menu('show',{
                            left: e.pageX,//在鼠标点击处显示菜单
                            top: e.pageY
                        });
                    }else if(node.attributes.state == 1){
                        $("#tree-1").menu('show',{
                            left: e.pageX,//在鼠标点击处显示菜单
                            top: e.pageY
                        });
                    }else{
                        $('#tree-0').menu('show', {
                            left: e.pageX,//在鼠标点击处显示菜单
                            top: e.pageY
                        });
                    }

                },
                //单击某类别 展示不同详细和按钮选择
                onClick: function (node) {
                    if (node.attributes.state == 2) { // 假如是二级菜单,可以删除
                        $("#dg").datagrid('load',{
                            "w_id":node.id
                        })
                        $('#add').linkbutton('disable');
                        $('#del').linkbutton('enable');
                        $('#del').attr("href", "javascript:deleteType()");
                    } else if (node.attributes.state == 1) {
                        $("#dg").datagrid('load',{
                            "o_id":node.id
                        })
                        $('#add').linkbutton('enable');
                        $('#add').attr("href", "javascript:openTypeAddDialog()");
                        $('#del').linkbutton('enable');
                        $('#del').attr("href", "javascript:deleteType()");
                    }
                }
            });
        }
        //添加类别 如果树形菜单为外部不选择node节点 则先重载 取消node的选择 保存为一级菜单
        function openTypeAddDialog(treeSelect) {
            if(treeSelect==0){
                reloadTree();
            }
            $("#dlg").dialog("open").dialog("setTitle", "新增库房类别");
        }
        //保存类别 有则加冕 无则改之 有node则创建其二级菜单 没有node则创建一级菜单
        function saveType() {
            var typeName = $("#typeName").val();
            if (!$("#fm").form("validate")) {
                return;
            }
            var node = $('#tree').tree('getSelected'); // 获取选中节点
            var parentId; // 父节点Id
            if (node == null) {
                parentId = -1;
            } else {
                parentId = node.id;
            }

            $.post("/admin/kufang/save", {'kufangmingcheng': typeName, 'p_id': parentId}, function (result) {
                if (result.success) {
                    $('#tree').tree('reload');
                    closeTypeDialog();
                } else {
                    $.messager.alert("系统提示", "提交失败，请联系管理员！");
                }
            }, "json");
        }
        //删除类别
        function deleteType() {
            $.messager.confirm('删除提示', '删除一级库房会同时一并删除其中二级库房,请谨慎操作', function (r) {
                if (r) {
                    // exit action;
                    var node = $('#tree').tree('getSelected'); // 获取选中节点
                    var id = node.id;
                    $.post("/admin/kufang/delete", {id: id}, function (result) {  //TODO 删除库房名称路径
                        if (result.success) {
                            $('#tree').tree('reload');
                            $("#dg").datagrid('reload');
                        } else {
                            $.messager.alert("系统提示", "提交失败，请联系管理员！");
                        }
                        $('#del').linkbutton('disable');
                    }, "json");
                }
            });

        }
        //关闭类别新增窗口
        function closeTypeDialog() {
            $("#dlg").dialog("close");
            $("#typeName").val("");
        }

        //搜索详细
        function searchDetails() {
            $("#dg").datagrid('load', {
                "kufangmingcheng": $("#s_name").val()
            });
        }
        //
        // function formatPurchasingPrice(val, row) {
        //     return "￥" + val;
        // }
        //
        // function formatSellingPrice(val, row) {
        //     return "￥" + val;
        // }

        function loadDataGrid(){
        $("#dg").datagrid({

            //悬停提示tooltip
            onLoadSuccess: function (data) {
                $(this).datagrid('tooltip');
            },

            //双击事件
            onDblClickRow: function (index, row) {
                $("#dlg2").dialog("open").dialog("setTitle", "修改信息");
                $("#fm2").form("load", row);
                $("#name").val(row.kufangmingcheng);
                url = "/admin/dkufang/update?id=" + row.id;
                $("#saveAndAddNextBuuton").hide();
                $("#saveDetails").hide();
                $("#updateDetails").show();
            },
            onRowContextMenu: function (e, rowIndex, rowData) { //右键时触发事件                      
                e.preventDefault(); //阻止浏览器捕获右键事件
                $(this).datagrid("clearSelections"); //取消所有选中项
                $(this).datagrid("selectRow", rowIndex); //根据索引选中该行
                $('#grid-data').menu('show', {
                    left: e.pageX,//在鼠标点击处显示菜单
                    top: e.pageY
                });
                e.preventDefault();  //阻止浏览器自带的右键菜单弹出
            },
         },
            //之下为鼠标悬停table上展示单个字段的tooltip
            $.extend($.fn.datagrid.methods, {
                tooltip: function (jq, fields) {
                    return jq.each(function () {
                        var panel = $(this).datagrid('getPanel');
                        if (fields && typeof fields == 'object' && fields.sort) {
                            $.each(fields, function () {
                                var field = this;
                                bindEvent($('.datagrid-body td[field=' + field + '] .datagrid-cell', panel));
                            });
                        } else {
                            bindEvent($(".datagrid-body .datagrid-cell", panel));
                        }
                    });

                    function bindEvent(jqs) {
                        jqs.mouseover(function () {
                            var content = $(this).text();
                            if (content && content != "") {
                                $(this).tooltip({
                                    content: content,
                                    trackMouse: true,
                                    deltaX: 15,
                                    deltaY: -5,
                                    onShow: function () {
                                        $(this).tooltip('tip').css({
                                            backgroundColor: '#f7f5d1',
                                            borderColor: 'black'
                                        });
                                    }
                                }).tooltip('show');
                            }
                        });
                    }
                }
            }));
        }

        //根据类别创建详细
        function openDetailAddDialog() {
            var node = $('#tree').tree('getSelected'); // 获取选中节点
            if (!node) {
                $.messager.alert("系统提示", "请选择库房分类进行创建！");
            } else {
                resetDetailValue();
                $("#dlg2").dialog("open").dialog("setTitle", "添加库房信息");
            }
            url = "/admin/dkufang/save";
            $("#updateDetails").hide();
            $("#saveAndAddNextBuuton").show();
            $("#saveDetails").show();
        }
        //修改详细
        function openDetailsModifyDialog() {
            var selectedRows = $("#dg").datagrid("getSelections");
            if (selectedRows.length != 1) {
                $.messager.alert("系统提示", "请选择一条要修改的数据！");
                return;
            }
            var row = selectedRows[0];
            $("#dlg2").dialog("open").dialog("setTitle", "修改信息");
            $("#fm2").form("load", row);
            $("#name").val(row.kufangmingcheng);
            url = "/admin/dkufang/update?id=" + row.id;
            $("#saveAndAddNextBuuton").hide();
            $("#saveDetails").hide();
            $("#updateDetails").show();
        }
        //保存详细
        function saveDetails(type) {
            console.log("save dkufang");
            var node = $('#tree').tree('getSelected'); // 获取选中节点
            console.log("node.id:"+node.id);
            var parent = $('#tree').tree('getParent',node.target);//父节点
            console.log("parent:"+parent);
            var nodeId = node.id;
            var parentId;
            if(parent){
                parentId = parent.id;
            }else{
                parentId = node.id; //一级菜单下没有父菜单,则使用其自身的id
            }
            console.log("saveDetails parentId:"+parentId);
            $.post(url, {"kufangmingcheng": $("#name").val(), "w_id":nodeId,'o_id':parentId}, function (result) {
                if (result.success) {
                    if (type == 1) {
                        $("#dlg2").dialog("close");
                    }
                    $("#dg").datagrid('reload');
                    $.messager.alert("系统提示", "保存成功！");
                } else {
                    $.messager.alert("系统提示", "保存失败,请重试！");
                }
            });
        }
        //更改详细
        function updateDetails() {
            console.log("update dkufang");
            $.post(url, {"kufangmingcheng": $("#name").val()}, function (result) {
                if (result.success) {
                    $("#dlg2").dialog("close");
                    $("#dg").datagrid('reload');
                    $.messager.alert("系统提示", "更改成功！");

                } else {
                    $.messager.alert("系统提示", "更改失败,请重试！");
                }
            });
        }
        //key=13时判定同一窗口是更新还是保存
        function saveOrUpdate(){
            var updateBtnIsShow = $("#updateDetails").is(":visible");

            if (updateBtnIsShow){
                return updateDetails();
            }else{
                return saveDetails(2);
            }
        }

        //关闭详细窗口
        function closeDetailsDialog() {
            $("#dlg2").dialog("close");
            resetTypeValue();
        }
        //重置数据
        function resetDetailValue(){
            $("#name").val("");
        }
        function resetTypeValue() {
            // $("#typeId").val("");
            $("#typeName").val("");
            // $("#name").val("");
            // $("#model").val("");
            // $("#unit").combobox("setValue", "");
            // $('#purchasingPrice').numberbox('setValue', "");
            // $('#sellingPrice').numberbox('setValue', "");
            // $('#minNum').numberbox('setValue', "");
            // $("#producer").val("");
            // $("#remarks").val("");
        }
        //删除详细
        function deleteDetails() {
            var selectedRows = $("#dg").datagrid("getSelections");
            if (selectedRows.length == 0) {
                $.messager.alert("系统提示", "请选择要删除的数据！");
                return;
            }
            var ids = new Array();
            if(selectedRows.length>1){
                for(var i=0;i<selectedRows.length;i++){
                    ids.push(selectedRows[i].id);
                }
            }else if(selectedRows.length==1){
                var id = selectedRows[0].id;
                ids.push(id);
            }
            $.messager.confirm("系统提示", "您确定要删除这条数据吗？", function (r) {
                if (r) {
                    $.post("/admin/dkufang/delete", {'ids': ids}, function (result) {
                        if (result.success) {
                            $.messager.alert("系统提示", "数据已成功删除！");
                            $("#dg").datagrid("reload");
                        } else {
                            $.messager.alert("系统提示", "<font color=red>" + result.errorInfo + "</font>");
                        }
                    }, "json");
                }
            });
        }


    </script>
</head>
<body class="easyui-layout" style="padding-top: 2px">
<!--类别展示-->
<div id="tree-panel" data-options="region:'west',collapsible:false" style="width:200px" title="库房类别" split=true>
    <!--添加分类树形菜单的过长滚动条-->
    <div style="overflow-x: auto; overflow-y: auto; height: 90%; width:98%;">
    <ul id="tree" class="easyui-tree" style="padding: 10px"></ul>
    </div>
    <div style="position:absolute;bottom: 10px;left: 15px">
        <a id="add" href="javascript:openTypeAddDialog()" class="easyui-linkbutton" data-options="iconCls:'icon-add'">新增</a>
        <a id="del" href="javascript:deleteType()" class="easyui-linkbutton"
           data-options="iconCls:'icon-remove',disabled:true">删除</a>
    </div>
</div>
<!--详细展示-->
<div data-options="region:'center'">
        <table id="dg" title="库房管理" class="easyui-datagrid"  loadMsg="加载数据中,请稍候."
           fitColumns="true" pagination="true" rownumbers="true" checkbox="true"
           url="/admin/dkufang/getSelective" fit="true" toolbar="#tb">
        <thead>
        <tr>
            <th field="ukyo" align="center" width="30" checkbox="true"></th>
            <th field="id" width="20" align="center" sortable="true">编号</th>
            <th field="kufangmingcheng" width="130" align="center" sortable="true">库房名称</th>
            <th field="createtime" width="50" align="center" sortable="true">创建时间</th>
            <!--<th field="w_id" width="20" align="center">外键</th>-->
            <!--<th field="typeId" width="40" align="center" formatter="formatGoodsTypeId" hidden=true>类别ID</th>-->
        </tr>
        </thead>
    </table>
    <div id="tb">
        <div>
            <a href="javascript:openDetailAddDialog()" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
            <a href="javascript:openDetailsModifyDialog()" class="easyui-linkbutton" iconCls="icon-edit"
               plain="true">修改</a>
            <a href="javascript:deleteDetails()" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
        </div>
        <div>
            &nbsp;库房名称：&nbsp;<input type="text" id="s_name" size="20" onkeydown="if(event.keyCode==13)searchDetails()"/>
            <a href="javascript:searchDetails()" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜索</a>
        </div>
    </div>
</div>
<!--类别弹出窗及按钮组-->
<div id="dlg" class="easyui-dialog" style="width:300px;height:120px;padding: 10px 20px"
     closed="true" buttons="#dlg-buttons" data-options="onClose:function(){$('#typeName').val('');}">

    <form id="fm" onkeydown="if(event.keyCode==13)saveType()">
        <div>
            库房类别：&nbsp;<input type="text" id="typeName" name="name" class="easyui-validatebox" required="true"/>
        </div>
    </form>
</div>
<div id="dlg-buttons">
    <a href="javascript:saveType()" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
    <a href="javascript:closeTypeDialog()" class="easyui-linkbutton" iconCls="icon-cancel">关闭</a>
</div>
<!--详细弹出窗及按钮组-->
<div id="dlg2" class="easyui-dialog" style="width: 500px;height:150px;padding: 10px 20px"
     closed="true" buttons="#dlg-buttons2" data-options="onClose:function(){resetTypeValue()}">
    <form id="fm2" onkeydown="if(event.keyCode==13)saveOrUpdate()">
        <table cellspacing="8px">
            <tr>
                <td>库房名称：</td>
                <td colspan="4">
                    <input type="text" id="name" name="name" class="easyui-validatebox" required="true"
                           style="width: 350px;"/>
                </td>
            </tr>
            <!--<tr>-->
            <!--<td valign="top">备注：</td>-->
            <!--<td colspan="4">-->
            <!--<textarea rows="5" cols="47" id="remarks" name="remarks"></textarea>-->
            <!--</td>-->
            <!--</tr>-->
        </table>
    </form>
</div>
<div id="dlg-buttons2">
    <a id="saveAndAddNextBuuton" href="javascript:saveDetails(2)" class="easyui-linkbutton"
       iconCls="icon-ok">保存并新增下一库房</a>
    <a id="saveDetails" href="javascript:saveDetails(1)" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
    <a id="updateDetails" href="javascript:updateDetails()" class="easyui-linkbutton" iconCls="icon-ok">更改</a>
    <a href="javascript:closeDetailsDialog()" class="easyui-linkbutton" iconCls="icon-cancel">关闭</a>
</div>
<!--TODO 应用到生成单据的树形展示-->
<div id="dlg3" class="easyui-dialog" style="width:180px;height:300px;padding: 10px 10px"
     closed="true" buttons="#dlg-buttons3">

    <ul id="typeTree" class="easyui-tree"></ul>
</div>
<!--TODO 应用到生成单据的树形展示-->
<div id="dlg-buttons3">
    <a href="javascript:saveGoodsTypeChoose()" class="easyui-linkbutton" iconCls="icon-ok" plain="true">选择</a>
    <a href="javascript:closeGoodsTypeChooseDialog()" class="easyui-linkbutton" iconCls="icon-cancel"
       plain="true">关闭</a>
</div>

<!--大屏幕上右键datagrid dlg-->
  <div id="grid-data" class="easyui-menu" style="width: 80px; display: none;">
    <div id="grid-data-edit" href="javascript:openDetailsModifyDialog()" data-options="iconCls:'icon-edit'">修改</div>
    <div id="grid-data-delete" href="javascript:deleteDetails()" data-options="iconCls:'icon-remove'" plain="true">删除</div>
</div>
<!--二级菜单右键弹出-->
  <div id="tree-2" class="easyui-menu" style="width: 80px; display: none;">
    <div id="tree-2-delete" href="javascript:deleteType()" data-options="iconCls:'icon-remove'" >删除二级菜单</div>
</div>
<!--一级菜单右键弹出-->
  <div id="tree-1" class="easyui-menu" style="width: 80px; display: none;">
    <div id="tree-1-add-2" href="javascript:openTypeAddDialog()" data-options="iconCls:'icon-add'" >添加二级菜单</div>
    <div id="tree-1-delete" href="javascript:deleteType()" data-options="iconCls:'icon-remove'" >删除一级菜单</div>
</div>
<!--树形菜单右键弹出-->
  <div id="tree-0" class="easyui-menu" style="width: 80px; display: none;">
    <div id="tree-0-add-1" href="javascript:openTypeAddDialog(0)" data-options="iconCls:'icon-add'" >添加一级菜单</div>
    <div id="tree-0-refresh" href="javascript:reloadTree()" data-options="iconCls:'icon-reload'" >重新加载类别</div>
</div>
           
             
             

<!--<ul id="menu">-->
    <!--<li>鱼香肉丝</li>-->
    <!--<li>醋溜土豆丝</li>-->
    <!--<li>麻辣小龙虾</li>-->
    <!--<li>回锅肉</li>-->
<!--</ul>-->

</body>
</html>